<template>
    <div id="tmpl">
        <div class="cart-container">
            <div class="cart-hd flex">
                <span class="check-box"><input type="checkbox" @change="allselected()" checked="false" ref="allcheck"> 全选</span>
                <span class="delete-btn"></span>
            </div>
            <div class="cart-list">
                <ul>
                    <li class="cart-li flex" v-for="(item,index) in proobj" :key="index">
                        <div class="left">
                            <input type="checkbox" v-model="$store.getters.getGoodsSelected[item.sku_id]" @change="selectedChanged(item.sku_id,$store.getters.getGoodsSelected[item.sku_id])">
                            <img :src="item.img">
                        </div>
                        <div class="right">
                            <p class="tit">{{item.title}}</p>
                            <div class="sku-info flex">
                                <span>{{item.selectstatus}}</span>
                                <i></i>
                            </div>
                            <div class="pri_num_box flex">
                            <div class="price">
                                ￥<span>{{item.zs_price}}</span>
                            </div>
                            <div class="num-box">
                                    ×{{$store.getters.getGoodsCount[item.sku_id]}}
                            </div>
                            </div>
                        </div>
                    </li>
                </ul>
            </div>
            <div class="nocar" v-show="show">
                <p>购物车没有商品</p>
            </div>
        </div>
        <div class="bottom-pay flex cart-bottom">
            <div class="left">
                总计：<span>{{totalprice}}元</span>
            </div>
            <div class="right" @click="goComorder()">
                立即下单
            </div>
        </div>
    </div>

</template>

<script>
    import axios from 'axios';
    export default{
        data() {
            return {
                proobj:{},
                totalprice:0,//合计
                show:false,
            }
        },
        created() {
            this.gerProdetail();
            this.getAmountPrice();
        },
        methods: {
            //axios获取数据
            gerProdetail() {
                //判断如果缓存里面没有记录那么就不进行加载
                var idArr =[];
                this.$store.state.car.forEach(item => idArr.push(item.skuid));
                if(idArr.length <= 0){
                    this.show=true;
                    return
                }
                this.$axios({
                    method: 'get',
                    // url:"../src/data/cart.json?id=12,13,14" 传入加入购物车的商品id
                    url:"../src/data/cart.json"
                }).then((res)=>{
                    this.proobj=res.data.data;
                })
            },
            //合计选中价格
            getAmountPrice(){
                this.totalprice=0;
                this.$store.state.car.forEach(item=>{
                    if(item.selected==true){
                        this.totalprice+=item.zs_price*item.count
                    }else{
                        return
                    }
                })
            },
            //全选
            allselected(){
                this.$store.state.car.forEach(item=>{
                    item.selected =!item.selected;
                    this.$store.commit("updateGoodsSelected",{id:item.skuid,selected:item.selected})
                });
                this.getAmountPrice()
            },
            //单选
            selectedChanged(skuid,val){
                //每当点击开关，把最新的开关状态同步到store中
                this.$store.commit("updateGoodsSelected",{skuid,selected:val})
                this.$store.state.car.forEach(item=>{
                    if(!item.selected){
                        this.$refs.allcheck.checked=false;
                        return
                    }else{
                        this.$refs.allcheck.checked=true;
                    }
                });
                this.getAmountPrice()
            },
            //下单
            goComorder(){
                var selectedIdArr =[];
                this.$store.state.car.forEach(item=>{
                    if(item.selected==true){
                      selectedIdArr.push(item.skuid);
                    }
                })
                this.$router.push({
                path: '/comorder/',
                query: {
                    selectedId:selectedIdArr
                }
                })
            }
        }
    }
</script>
<style scoped>

</style>